<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 800px;
            height: 200px;
            border:10px red solid
        }

        .inner{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin-left: auto;

        }
        /*
            元素的水平布局
                元素在其父元素中水平方向的位置由以下几个属性共同决定
                    margin-left
                    border-left
                    padding-left
                    width
                    padding-right
                    border-right
                    margin-right

            一个元素在其父元素中，水平布局必须满足以下的等式
           margin-left+ border-left+padding-left+width+padding-right+border-right+margin-right=其父元素内容区的宽度（必须满足）
           如果相加结果使其不成立，则称为过滤约束，则灯饰会自动调整
            - 调整的情况：
                -如果这七个值中没有auto的情况，则浏览器会自动调整margin-right值以使等式成立

            - 这七个值长有三个可以设置为auto
                width
                margin-left
                margin-right
                    如果某一个值为auto,则会自动调整为auto的那个值以使等式成立

                - 如果将一个宽度和一个外边距设置为auto,则宽度会调整为最大
                - 如果将三个值都设置为auto,则外边距都是0，宽度最大；
                - 如果将两个外边距设置为auto,宽度固定，则会自动将外边距设置为相同的值；
                    -如果我们经常利用这个特点来使一个元素在其父元素中水平居中
                    实例：
                        width:xxx;
                        margin:0 auto;
        *
        */
    </style>
</head>
<body>
    

    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>